<template>
  <div class="app-my-info-content">
    <div class="app-my-info">
      <!--todo:未实现-->
      <h2>This is My Info page.</h2>
    </div>
    <AppFoot :selectedId="5"/>
    <span class="no-support-message">该页面暂不支持横屏!</span>
  </div>
</template>

<script>
import AppFoot from '@/components/AppFoot'
export default {
  name: 'AppMyInfo',
  components: {
    'AppFoot': AppFoot
  }
}
</script>

<style lang="less" scoped>
  @media screen and (orientation: portrait){
    .no-support-message{
      display: none;
    }
    .app-my-info{
      display: block;
    }
  }
  @media screen and (orientation: landscape) {
    .app-my-info{
      display: none;
    }
    .no-support-message{
      display: block;
      text-align: center;
      font-size: 2rem;
      margin-top: 20%;
    }
  }
</style>
